import React, { useState } from 'react'
import { Map, Marker } from 'react-amap';
const Maps = () => {
    const [plugins] = useState([
        'MapType',
        'Scale',
        'OverView',
        'ControlBar', // v1.1.0 新增
        {
            name: 'ToolBar',
            options: {
                visible: true,  // 不设置该属性默认就是 true
                onCreated(ins) {
                    console.log(ins.getLocation());
                },
            },
        }
    ])
    const [mapPlugins] = useState(['ToolBar'])
    const [mapCenter] = useState({ longitude: 116, latitude: 40 })
    const [markerPosition, setMarkPosition] = useState({})
    const [geocoder] = useState()
    console.log(geocoder,'===');
    const events = {
        created: (ins) => {
            // ins.plugin(["AMap.Geocoder"], function () {
            //     geocoder = new AMap.Geocoder({
            //         radius: 1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
            //         extensions: "all"//返回地址描述以及附近兴趣点和道路信息，默认"base"
            //     });
            // });
            console.log(ins);
        },
        click: (event) => {
            console.log(event.target.getStatus());
            setMarkPosition({
                longitude: event.lnglat.lng,
                latitude: event.lnglat.lat
            })
        }
    }
    return (
        <div>
            <div style={{ width: '100%', height: '667px' }}>
                <Map center={mapCenter} zoom={10} zooms={5, 8} events={events} plugins={plugins} amapkey={'788e08def03f95c670944fe2c78fa76f'}>
                    <Marker position={markerPosition} />
                </Map>
            </div>
        </div>
    )
}

export default Maps
